<template>
	<vxe-modal ref='vxeModalRef' v-bind='modalConfig'
			   :id='modalId'
			   @close='closeModal' @zoom='zoomModal'>
		<template v-slot:title>
			<slot name='title'>
				{{ modalConfig.title }}
			</slot>
		</template>
		<n-scrollbar trigger='hover'>
			<slot name='default'></slot>
		</n-scrollbar>
		<template v-slot:footer>
			<slot name='footer'></slot>
		</template>
	</vxe-modal>
</template>
<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import { VxeUI, VxeModal } from '@/config/vxe/vxe-pc-ui/index.ts';
import type { VxeModalProps } from 'vxe-pc-ui/types/all.d.ts';
import { PropType } from 'vue';
// 接收的参数
const props = defineProps({
	modalId           : {
		type    : String,
		require : true,
		default : null
	},
	reLoad            : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : true,
		default : null
	},
	onMountedEvent    : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : true,
		default : null
	},
	onOpenModalEvent  : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : true,
		default : null
	},
	onCloseModalEvent : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : true,
		default : null
	},
	onZoomModalEvent  : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : false,
		default : null
	},
	resetEvent        : {
		type    : Function as PropType<() => Promise<any>> | any | null,
		require : true,
		default : null
	}
});
const vxeModalRef = ref<InstanceType<typeof VxeModal>>();
// 模态框的配置
const modalConfig = reactive<VxeModalProps>({
	modelValue : false,
	id         : '',
	title      : '',
	width      : '',
	height     : '',
	showClose  : true,
	resize     : true,
	loading    : false
});
onMounted(() => {
	if (props.onMountedEvent) {
		props.onMountedEvent().catch((error: any) => {
			console.error(error);
			VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
		});
	}
});
const openModal = async (config: VxeModalProps) => {
	props.resetEvent().then(() => {
		Object.assign(modalConfig, {
			...config,
			modelValue : true,
			loading    : true
		});
		if (props.onOpenModalEvent) {
			try {
				props.onOpenModalEvent().then(() => {
					modalConfig.loading = false;
				}).catch((error: any) => {
					modalConfig.loading = false;
					/*console.error(error);*/
					/*VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });*/
				});
			} catch (error) {
				console.error(error);
				// 如果出错也继续执行
				modalConfig.loading = false;
			}
		} else {
			modalConfig.loading = false;
		}
	});
};
const closeModal = async () => {
	if (props.onCloseModalEvent) {
		props.onCloseModalEvent().then(() => {
			modalConfig.modelValue = false;
			modalConfig.loading = false;
		}).catch((error: any) => {
			console.error(error);
			VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
		});
	} else {
		modalConfig.modelValue = false;
		modalConfig.loading = false;
	}
};
const zoomModal = async () => {
	if (props.onZoomModalEvent) {
		props.onZoomModalEvent().catch((error: any) => {
			console.error(error);
			VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
		});
	}
};
// 导出方法
defineExpose({ openModal, closeModal });
</script>